22. CSS for Accessibility

I. Color Contrast and Legibility

Explanation: Text aur background ke beech clear contrast hona chahiye taaki users, especially low-vision waale, text easily padh sakein.
Kyon important hai: Agar contrast low hoga to text mushkil se dikhega ya bilkul nahi dikhega — isliye high contrast zaroori hai.

<style> .good { background-color: black; color: white; padding: 20px; font-size: 18px; } </style> <div class="good">High contrast text for better readability</div> Run Code

II. Accessible Font Sizes

Explanation: Accessible websites me font sizes relative units (jaise rem) me hone chahiye taaki zoom karne par scale ho sake.
Kyon important hai: Fixed px size se low-vision users ko dikkat hoti hai. `rem` use karne se font screen settings ke according adjust ho jata hai.

<style> body { font-size: 1rem; } h1 { font-size: 2rem; } </style> <h1>Scalable Font Example</h1> Run Code

III. Focus States

Explanation: Keyboard se navigate karne wale users ke liye focus state dikhana zaroori hota hai.
Kyon important hai: Focus outline batata hai ki abhi user kis element pe hai. Agar ye missing ho, to keyboard users confuse ho jaate hain.

<style> button:focus { outline: 3px solid orange; outline-offset: 4px; } </style> <button>Click or Tab to Focus</button> Run Code

IV. ARIA Roles & Attributes

Explanation: ARIA roles aur attributes screen readers ko help karte hain element ka function samajhne me.
Kyon important hai: Visual users ko dikhta hai ki kya hai, lekin screen reader ke users ko ye ARIA batata hai ki nav menu, button ya dialog kya kaam karta hai.

<nav role="navigation" aria-label="Main Menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> </ul> </nav> <button aria-label="Close Menu">×</button> Run Code